<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 2.div一定要写宽高 -->
    <style>
      .main {
        width: 600px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <!-- 1.创建一个div -->
    <div class="main"></div>
    <!-- 3.引入js文件 -->
    <script src="../assets/lib/echarts/echarts.min.js"></script>
    <!-- 4.cv文档代码 -->
    <script>
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector(".main"));

      // 指定图表的配置项和数据
      const option = {
        
  dataZoom: [
  {
    // 滑块开始的位置
    start: 0,
    // 滑块结束位置
    end: 30,
  },
],
  color: ["red", "blue"],
  title: {
    text: '薪资 Salary '
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    
  },
  series: [
    {
      name: '期望薪资',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      symbol: "circle",
      smooth: true,
      
    },
    {
      name: '实际薪资',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      symbol: "circle",
      smooth: true,
    }
  ]
}
      

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
